<template>
    <view class="container">
        <view class="top">
            <view class="btn" :class="{ active: state == 2 }" @click="selectBtn(2)">进行中</view>
            <view class="btn" :class="{ active: state == 3 }" @click="selectBtn(3)">已结束</view>
        </view>
        <view class="create" v-for="(item, index) in list" :key="index">
            <text v-if="item.places == 1" style="font-weight: 700">室内活动</text>
            <text v-else style="font-weight: 700">室外活动</text>
            <view class="center">
                <image class="one" :src="$getimgsrc(item.images)" mode="aspectFill"></image>
                <view class="right">
                    <text style="font-weight: bold; font-size: 28rpx; color: #151515">{{ `${timeChange(item.starttime)} ${item.title}` }}</text>
                    <view class="num">
                        <image class="two" src="@/static/myimg/a12.png"></image>
                        <text style="font-weight: 400; font-size: 24rpx; color: #151515">{{ `${item.num}人` }}</text>
                        <view class="color">
                            <image src="@/static/myimg/a11.png" style="width: 56rpx; height: 24rpx; vertical-align: middle"></image>
                            <text style="font-weight: 400; font-size: 20rpx; color: #ffffff">{{ item.girl_num }}</text>
                        </view>
                        <view class="color" style="margin-left: 10rpx">
                            <image src="@/static/myimg/a10.png" style="width: 56rpx; height: 24rpx; vertical-align: middle"></image>
                            <text style="font-weight: 400; font-size: 20rpx; color: #ffffff">{{ item.male_num }}</text>
                        </view>
                    </view>
                    <view class="num">
                        <image class="two" src="@/static/myimg/a12.png" style="vertical-align: top"></image>
                        <text class="text_0">{{ `${util.timeChange2(item.starttime)} - ${util.timeChange2(item.endtime)} ${week(item.starttime)}` }}</text>
                    </view>
                    <view class="num">
                        <image class="two" src="@/static/myimg/a12.png" style="vertical-align: top"></image>
                        <text
                            class="text_0"
                            style="width: 355rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
                        >
                            {{ item.address }}
                        </text>
                    </view>
                </view>
            </view>
            <view style="border: 1rpx solid #e8e8e8; margin: 20rpx 0"></view>
            <view class="bottom">
                <view class="left">
                    <view style="display: inline-block; margin-left: 20rpx">
                        <image :src="$getimgsrc(item2.avatar)" v-for="(item2, index2) in item.userlist" v-if="index2 < 6" style="margin-left: -20rpx" mode="aspectFill" />
                    </view>
                    <text style="margin-left: 20rpx; font-weight: 400; font-size: 24rpx; color: #666666">
                        {{ `${item.places == 1 ? '报名中' : '报名'}${item.userlist.length}/${item.num}` }}
                    </text>
                </view>
                <view v-if="state == 2" class="right" style="background-color: #feff01; font-weight: 500; font-size: 28rpx; color: #151515" @click="upload(item.id)">查看详情</view>
                <view v-else class="right" style="background-color: #feff01; font-weight: 500; font-size: 28rpx; color: #151515; background-color: #cccfdb">已结束</view>
            </view>
        </view>
        <!-- <view v-else>
            <view class="create" v-for="item in list" :key="item">
                <text style="font-weight: 700">室内活动</text>
                <view class="center">
                    <image class="one" src="#"></image>
                    <view class="right">
                        <text style="font-weight: bold; font-size: 28rpx; color: #151515">5.09 周二密室</text>
                        <view class="num">
                            <image class="two" src="@/static/myimg/a12.png"></image>
                            <text style="font-weight: 400; font-size: 24rpx; color: #151515">20人</text>
                            <view class="color">
                                <image src="@/static/myimg/a11.png" style="width: 56rpx; height: 24rpx; vertical-align: middle"></image>
                                <text style="font-weight: 400; font-size: 20rpx; color: #ffffff">2</text>
                            </view>
                            <view class="color" style="margin-left: 10rpx">
                                <image src="@/static/myimg/a10.png" style="width: 56rpx; height: 24rpx; vertical-align: middle"></image>
                                <text style="font-weight: 400; font-size: 20rpx; color: #ffffff">2</text>
                            </view>
                        </view>
                        <view class="num">
                            <image class="two" src="@/static/myimg/a12.png" style="vertical-align: top"></image>
                            <text class="text_0">05.09 19:00-05.28 20:30 周二</text>
                        </view>
                        <view class="num">
                            <image class="two" src="@/static/myimg/a12.png" style="vertical-align: top"></image>
                            <text
                                class="text_0"
                                style="width: 355rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
                            >
                                安徽省芜湖市弋江区双瞳超圾密室逃脱 安徽省芜湖市弋江区双瞳超圾密室逃脱 安徽省芜湖市弋江区双瞳超圾密室逃脱 安徽省芜湖市弋江区双瞳超圾密室逃脱
                            </text>
                        </view>
                    </view>
                </view>
                <view style="border: 1rpx solid #e8e8e8; margin: 20rpx 0"></view>
                <view class="bottom">
                    <view class="left">
                        <image src="@/static/logo.png" v-for="index in 6" :key="index" style="margin-left: -20rpx" />

                        <text style="margin-left: 20rpx; font-weight: 400; font-size: 24rpx; color: #666666">报名中6/20</text>
                    </view>
                    <view class="right" style="background-color: #feff01; font-weight: 500; font-size: 28rpx; color: #151515; background-color: #cccfdb">已结束</view>
                </view>
            </view>
        </view> -->
    </view>
</template>

<script>
import { attend } from '@/utils/my.js';
export default {
    data() {
        return {
            select: true,
            state: '2', // 活动状态 2 进行中   3 已完成
            page: 1,
            list: []
        };
    },
    async onShow() {
        this.listData();
    },
    onReachBottom() {
        if (this.list.length < this.page * 10) return;
        console.log('触底刷新');
        this.page++;
        this.listData(1);
    },
    methods: {
        async listData(type) {
            const res = await attend({ page: this.page, state: this.state });
            if (type == 1) {
                this.list.push(...res.data.data);
                console.log('触底刷新添加新的列表数据-----------------', this.list);
                return;
            }
            // 当前列表数据
            this.list = res.data.data;
            console.log('列表数据-----------------', this.list);
        },
        selectBtn(type) {
            // 清空list数据
            this.list = [];
            this.state = `${type}`;

            this.listData();
        },
        upload(id) {
            console.log('1111111111111111111111111111');
            uni.navigateTo({
                url: `/my/particulars/particulars?id=${id}`
            });
        },
        timeChange(timestamp) {
            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return M + D;
        },
        week(timestamp) {
            const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
            const date = new Date(timestamp * 1000); // 注意：时间戳一般是以秒为单位，而Date构造函数需要的是毫秒，所以乘以1000
            const dayOfWeek = date.getDay(); // 0 表示周日，1 表示周一，... ，6 表示周六
            return `${days[dayOfWeek]}`;
        }
    }
};
</script>

<style lang="scss">
.container {
    padding: 20rpx 30rpx;
    .top {
        margin-bottom: 20rpx;
        .btn {
            width: 148rpx;
            height: 64rpx;
            line-height: 64rpx;
            display: inline-block;
            border-radius: 32rpx;
            text-align: center;
            margin-right: 20rpx;
            font-size: 32rpx;
            color: #666666;
        }
        .active {
            color: #151515;
            background-color: #feff01;
        }
    }
    .create {
        box-sizing: border-box;
        width: 690rpx;
        height: 418rpx;
        background: #fffff1;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 24rpx 16rpx;
        margin-bottom: 20rpx;
        .center {
            display: flex;
            margin-top: 20rpx;
            .one {
                width: 260rpx;
                height: 168rpx;
                background-color: aqua;
                vertical-align: top;
                border-radius: 12rpx;
                overflow: hidden;
            }
            .right {
                display: inline-block;
                margin-left: 15rpx;
                .num {
                    display: flex;
                    align-items: center;
                    // margin: 10rpx 0;
                    .two {
                        width: 24rpx;
                        height: 24rpx;
                        vertical-align: bottom;
                    }
                    text {
                        display: inline-block;
                        height: 100%;
                        line-height: 40rpx;
                        margin: 0 30rpx 0 10rpx;
                        // 限制长度
                    }
                    .text_0 {
                        font-size: 24rpx;
                        vertical-align: top;
                    }
                    .color {
                        display: inline-block;
                        position: relative;
                        top: 0;
                        left: 0;
                        image {
                            vertical-align: top;
                        }
                        text {
                            display: inline-block;
                            width: 30rpx;
                            position: absolute;
                            right: -25rpx;
                            top: 6rpx;
                            color: #ffffff;
                            border-radius: 5rpx;
                        }
                    }
                }
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            .left {
                image {
                    width: 56rpx;
                    height: 56rpx;
                    border-radius: 28rpx;
                    margin-left: -20rpx;
                    vertical-align: middle;
                }
            }
            .right {
                width: 160rpx;
                height: 60rpx;
                line-height: 60rpx;
                text-align: center;

                border-radius: 20rpx;
            }
        }
    }
}
</style>
